<template>
	<view class="module_btn" :style="[module_style]">
		<view class="module_com_btn" :class="[btn_class]" :style="[btn_style]" @click.stop="module_btn_click()">
			<view class="iconView" v-if="iconSrc">
				<myimg :imgsrc="iconSrc" :width="iconWidth"></myimg>
			</view>
			<text class="module_com_btn_tt" :style="[txt_style]">
				{{ title }}
			</text>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';

import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'btns',
	props: {
		iconSrc: {
			type: [String],
			default: '',
		},
		iconWidth: {
			type: [Number, String],
			default: '100',
		},
		padding: {
			type: [Array],
			default: [12, 36],
		},
		btn_class: {
			type: [Object, String, Boolean, Array],
			default: '',
		},
		title: {
			type: [String],
			default: '确认',
		},
		height: {
			type: [Number, String],
			default: '88',
		},
		radius: {
			type: [Number, String],
			default: 0,
		},
		index: {
			type: [Number, String],
			default: '0',
		},
		backGround: {
			type: [String],
			default: '#1FD1C2',
		},
		module_config: {
			type: [Object, Array],
			default: function () {
				return {};
			},
		},
		btn_config: {
			type: [Object, Array],
			default: function () {
				return {};
			},
		},

		txt_config: {
			type: [Object, Array],
			default: function () {
				return {};
			},
		},
	},
	watch: {},
	data() {
		return {
			// viewClass: 'module_btn_' + Math.random().toString(36).substr(2, 16),
		};
	},
	created() {
		// this.init_pagedata('btns');
	},
	mounted() {},
	computed: {
		btn_style() {
			let radius = this.radius > 0 ? this.radius : this.height / 2;
			let style = {
				height: `${this.height}rpx`,
				lineHeight: `${this.height}rpx`,
				borderRadius: `${radius}rpx`,
				backgroundColor: this.backGround,
			};
			Object.assign(style, this.btn_config);
			return style;
		},
		txt_style() {
			return this.txt_config;
		},
		module_style() {
			let style = {};
			let padding = '';
			if (this.padding.length > 0) {
				this.padding.forEach(v => {
					padding += padding ? ` ${v}rpx` : `${v}rpx`;
				});
				style['padding'] = padding;
			}
			Object.assign(style, this.module_config);
			return style;
		},
	},
	methods: {
		...common,
		module_btn_click() {
			let _this = this;
			_this.$emit('module_btn_click', _this.index);
		},
		// init_pagedata_callback() {
		// 	let _this = this;
		// 	_this.getStickyH(`#${this.viewId}`)
		// },
	},
};
</script>

<style lang="scss">
.module_btn {
	display: flex;
}

.module_com_btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	color: #ffffff;
	&.iswarn {
		background: #ff5656;
	}

	&.dis {
		background: #999999 !important;
		pointer-events: none !important;
	}
}

.iconView {
	margin: 0 12rpx;
}

.module_com_btn_tt {
	color: #ffffff;
	font-size: 32rpx;
	// font-weight: bold;
}
</style>
